<%-- Created by IntelliJ IDEA. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ExtJS TreePicker Demo</title>
    <link href="ext/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">
    <script src="ext/ext-all.js" type="text/javascript"></script>
    <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="js/TreePicker.js" type="text/javascript"></script>
</head>
<body>
<script>
    Ext.onReady(function () {

        var store = Ext.create(Ext.data.TreeStore, {
            root: {
                text: '目录',
                id: 'root'
            },
            autoLoad: true,
            proxy: {
                url: 'data/treeMulti.json',
                type: 'ajax'
            }
        });

        var store2 = Ext.create(Ext.data.TreeStore, {
            root: {
                text: '目录',
                id: 'root'
            },
            autoLoad: true,
            proxy: {
                url: 'data/treeSingle.json',
                type: 'ajax'
            }
        });

        Ext.create(Ext.container.Viewport, {
            layout: 'fit',
            items: [
                {
                    xtype: 'form',
                    bodyPadding : '50px',
                    items: [
                        {
                            xtype: 'pickerTree',
                            editable : false,
                            multiSelect:true,
                            store : store,
                            queryMode: 'local',
                            displayField: 'text',
                            valueField: 'text',
                            fieldLabel :'多选',
                            id:'multi'
                        },{
                            xtype: 'pickerTree',
                            editable : false,
                            multiSelect:false,
                            store : store2,
                            queryMode: 'local',
                            displayField: 'text',
                            valueField: 'text',
                            fieldLabel :'单选',
                            id:'single'
                        }
                    ],
                    buttons:[{
                        text:'确定',
                        handler:function(btn){
                           var multi = Ext.getCmp("multi").getValue();
                           var single = Ext.getCmp("single").getValue();
                           Ext.Msg.alert("提示","多选树的值是："+multi+"<br/>"+"单选树的值是："+single);
                        }
                    }]
                }
            ]
        });
    });
</script>
</body>
</html>